<link rel="import" href="packages/spark_widgets/spark_button/spark_button.html">
<link rel="import" href="packages/spark_widgets/spark_menu_button/spark_menu_button.html">
<link rel="import" href="packages/spark_widgets/spark_menu_item/spark_menu_item.html">
<link rel="import" href="packages/spark_widgets/spark_menu_separator/spark_menu_separator.html">

<polymer-element name="example-ui">
  <template>
    <link rel="stylesheet" href="../common/example_ui.css">

    <style>
      #button {
        width: 36px;
        height: 36px;
      }

      #buttonIcon {
        width: 24px;
        height: 24px;
      }
    </style>

    <spark-menu-button id="menuButton"
        valign="left"
        valueAttr="action"
        selected="email">

      <spark-button id="button" menuButton flat round padding="medium">
        <svg id="buttonIcon" viewBox="0 0 24 24">
          <path d="M12,8c1.1,0,2-0.9,2-2s-0.9-2-2-2c-1.1,0-2,0.9-2,2S10.9,8,12,8z M12,10c-1.1,0-2,0.9-2,2s0.9,2,2,2c1.1,0,2-0.9,2-2S13.1,10,12,10z M12,16c-1.1,0-2,0.9-2,2s0.9,2,2,2c1.1,0,2-0.9,2-2S13.1,16,12,16z"></path>
        </svg>
      </spark-button>

      <spark-menu-item name="post" label="Post a Comment" description="Ctrl-P">
      </spark-menu-item>
      <spark-menu-separator></spark-menu-separator>
      <spark-menu-item name="share" label="Share Link">
      </spark-menu-item>
      <spark-menu-item name="email" label="Email Link">
        <span>to johndoe@somewhere.com</span>
      </spark-menu-item>
      <spark-menu-item name="favorite" icon="../resources/add.png" label="Add to Favorites">
      </spark-menu-item>
      <spark-menu-separator></spark-menu-separator>
      <spark-menu-item name="bookmark" icon="../resources/add.png" label="Add Bookmark" description="Ctrl-B">
      </spark-menu-item>
    </spark-menu-button>
  </template>

  <script type="application/dart" src="example_ui.dart"></script>
</polymer-element>
